<template>
    <card-list :list = "list">
		<el-row :gutter="21" style="display: flex; justify-content: center; flex-wrap: wrap;">
			<el-col :span="7" v-for="(item,index) in list" :key="index">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>{{item.title}}</span>
					</div>

					<!--竖表格-->
					<div style="width: 100%;">
						<el-col style="margin-bottom: 15px;">
							<div class="box" v-for="(item2, index) in item.tableArr" :key="index">
								<div class="content1">{{ item2.key }}</div>
								<div class="content2">{{ item2.value == "" ? "待完善" : item2.value }}</div>
							</div>
						</el-col>
					</div>
					<div class="text item btn_1">
						<el-button style="width: 50%;" type="primary" plain >{{item.btn1}}</el-button>
						<el-button style="width: 50%;" type="primary" plain >{{item.btn2}}</el-button>
					</div>
					<div class="text item">
						<el-button style="width: 100%;" type="primary" plain >{{item.btn3}}</el-button>
					</div>
				</el-card>
			</el-col>
		</el-row>
    </card-list>
</template>

<script>
    import cardList from '@/components/card/index.vue'
    export default{
		components: {
			cardList
		},

        data () {
            return {
                list: [{
						title: "黑臭水体治理示范城市建设项目(汉江国投出资分项)",
						tableArr: [{
								key: "最后一次审计时间",
								value: "2020-12-31"
							},
							{
								key: "最后一次数据上报时间",
								value: "2021-01-10"
							}
						],
						btn1: "数据包下载",
						btn2: "附件资料下载",
						btn3: "查看审计信息",
						dept: "市财政局",
						vcount: "500次浏览",
						dm: "XY_0001",
						jd: "可行性研究阶段",
						jsxz: "新建",
						fbrq: "2020-05-06",
						t1: "项目名称"
					},
					{
						title: "黑臭水体治理示范城市建设项目(汉江国投出资分项)",
						tableArr: [{
								key: "最后一次审计时间",
								value: "2020-12-31"
							},
							{
								key: "最后一次数据上报时间",
								value: "2021-01-10"
							}
						],
						btn1: "数据包下载",
						btn2: "附件资料下载",
						btn3: "查看审计信息",
						dept: "市财政局",
						vcount: "500次浏览",
						dm: "XY_0001",
						jd: "可行性研究阶段",
						jsxz: "新建",
						fbrq: "2020-05-06"

					},
					{
						title: "黑臭水体治理示范城市建设项目(汉江国投出资分项)",
						tableArr: [{
								key: "最后一次审计时间",
								value: "2020-12-31"
							},
							{
								key: "最后一次数据上报时间",
								value: "2021-01-10"
							}
						],
						btn1: "数据包下载",
						btn2: "附件资料下载",
						btn3: "查看审计信息",
						dept: "市财政局",
						vcount: "500次浏览",
						dm: "XY_0001",
						jd: "可行性研究阶段",
						jsxz: "新建",
						fbrq: "2020-05-06"
					},
					{
						title: "黑臭水体治理示范城市建设项目(汉江国投出资分项)",
						tableArr: [{
								key: "最后一次审计时间",
								value: "2020-12-31"
							},
							{
								key: "最后一次数据上报时间",
								value: "2021-01-10"
							}
						],
						btn1: "数据包下载",
						btn2: "附件资料下载",
						btn3: "查看审计信息",
						dept: "市财政局",
						vcount: "500次浏览",
						dm: "XY_0001",
						jd: "可行性研究阶段",
						jsxz: "新建",
						fbrq: "2020-05-06"
					},
					{
						title: "黑臭水体治理示范城市建设项目(汉江国投出资分项)",
						tableArr: [{
								key: "最后一次审计时间",
								value: "2020-12-31"
							},
							{
								key: "最后一次数据上报时间",
								value: "2021-01-10"
							}
						],
						btn1: "数据包下载",
						btn2: "附件资料下载",
						btn3: "查看审计信息",
						dept: "市财政局",
						vcount: "500次浏览",
						dm: "XY_0001",
						jd: "可行性研究阶段",
						jsxz: "新建",
						fbrq: "2020-05-06"
					},
					{
						title: "黑臭水体治理示范城市建设项目(汉江国投出资分项)",
						tableArr: [{
								key: "最后一次审计时间",
								value: "2020-12-31"
							},
							{
								key: "最后一次数据上报时间",
								value: "2021-01-10"
							}
						],
						btn1: "数据包下载",
						btn2: "附件资料下载",
						btn3: "查看审计信息",
						dept: "市财政局",
						vcount: "500次浏览",
						dm: "XY_0001",
						jd: "可行性研究阶段",
						jsxz: "新建",
						fbrq: "2020-05-06"
					}
				],
            }
        }
    }
</script>

<style scoped>
	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}
	
	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 360px;
		margin: 10px;
	}

	#app {
		width: 100%;
		padding: 10px;
	}

	.box {
		width: 100%;
		height: 40px;
		display: flex;
		border-left: 1px solid #e9e9e9;
		border-top: 1px solid #e9e9e9;
	}

	.content1 {
		width: 50%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-right: 1px solid #e9e9e9;
		border-bottom: 1px solid #e9e9e9;
		color: #333;
		font-size: 14px;
	}

	.content2 {
		width: 50%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background-color: #fff;
		border-right: 1px solid #e9e9e9;
		border-bottom: 1px solid #e9e9e9;
		color: #b0b0b2;
		font-size: 14px;
	}

	.btn_1 {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.head_btn {
		display: flex;
		justify-content: center;
	}

	.tb_cls {
		margin-top: 20px;
	}
	
	.card_cls{
		margin-top: 10px;
	}
</style>